<template>
    <!--  账号输入登录-->
    <div class="login_box">
        <div class="login_top_btn">
            <i class="el-icon-close" @click="closeApp"/>
        </div>
        <div class="login_panel">
            <div class="login_title">
                <img src="~@/assets/logo.png">
            </div>
            <div v-show="isLogin">
                <el-form :model="loginForm" status-icon :rules="loginRules" ref="loginForm">
                    <div class="login_input">
                        <el-form-item prop="username">
                            <el-input :disabled="isDisabled" v-model="loginForm.username" autocomplete="off"
                                      placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input show-password type="password" :disabled="isDisabled" v-model="loginForm.password"
                                      autocomplete="off"
                                      placeholder="请输入密码"></el-input>
                        </el-form-item>
                    </div>
                    <div class="login_btn">
                        <el-form-item>
                            <el-button type="primary" :loading="isLoading" @click="login">登 录</el-button>
                            <el-button @click="resetForm" :disabled="isDisabled">重 置</el-button>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="login_bottom">
                    <el-link>忘记密码</el-link>
                    <el-link>|</el-link>
                    <el-link>注册账号</el-link>
                </div>
            </div>
            <div v-show="!isLogin" class="login_qrcode">
                <div>
                    <canvas id="canvas"/>
                </div>
                <span>扫一扫二维码登录</span>
                <el-button class="login_return" icon="el-icon-arrow-left" @click="loginReturn">返回</el-button>
            </div>
        </div>
        <div v-show="isLogin" class="login_qrcode_btn" @click="qrcodeLogin"/>
    </div>
</template>

<script>
  import {ipcRenderer, remote} from 'electron'
  import QRCode from 'qrcode'
  import { uuid } from 'uuidv4'
  import {MAIN_PAGE_HEIGHT, MAIN_PAGE_WIDTH} from '../constant/index'

  export default {
    name: 'login',
    data () {
      return {
        isLogin: true,
        isLoading: false,
        isDisabled: false,
        loginForm: {
          username: '',
          password: ''
        },
        loginRules: {
          username: [{required: true, trigger: 'blur', message: '账号不能为空'}],
          password: [{required: true, trigger: 'blur', message: '密码不能为空'}]
        }
      }
    },
    components: {
      QRCode: QRCode
    },
    methods: {
      login () {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.isLoading = true
            // 登录是充值按钮禁用
            this.isDisabled = true
            console.log('success submit!!')
            setTimeout(() => {
              console.log('准备进入主页面')
              var win = remote.getCurrentWindow()
              win.setSize(MAIN_PAGE_WIDTH, MAIN_PAGE_HEIGHT)
              win.center()
              // 跳转到聊天页面
              this.$router.push({path: '/main'})
            }, 3000)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm () {
        this.$refs.loginForm.resetFields()
      },
      qrcodeLogin () {
        console.log('二维码登录')
        this.isLogin = false
        var canvas = document.getElementById('canvas')
        // 生成随机值 UUID
        var textUUID = uuid()
        QRCode.toCanvas(canvas, textUUID, {width: 200}, function (error) {
          if (error) console.error(error)
          console.log('生成二维码成功')
        })
      },
      loginReturn () {
        this.isLogin = true
      },
      closeApp () {
        ipcRenderer.send('closeApp')
      }
    }
  }
</script>

<style scoped>
    /*登录框*/
    .login_box {
        z-index: 99;
        position: absolute;
        width: 340px;
        height: 480px;
        top: 50%;
        left: 50%;
        margin-left: -170px;
        margin-top: -240px;
        border-radius: 6px;
        background-color: #fff;
        box-shadow: 0 2px 10px #999;
    }

    .login_qrcode_btn {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 64px;
        height: 64px;
        background: url(../assets/qrcode.png) no-repeat right top;
        transform: rotate(90deg);
        background-size: 100% 100%;
        border-top-right-radius: 5px;
        cursor: pointer;
        z-index: 99;
    }

    /*登录*/
    .login_panel {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 270px;
        height: 540px;
        padding: 0 0px;
        transform: translate(-50%, -50%);
        /* background: #fff; */
        border-radius: 6px;
        overflow: hidden;
    }

    .login_panel .login_title {
        text-align: center;
    }

    .login_panel .login_title img {
        margin-top: 60px;
        height: 80px;
        width: 80px;
        border-radius: 50%;
        padding: 10px;
    }

    .login_panel .login_title p {
        margin-top: 15px;
        color: #999999;
        font-size: 15px;
    }

    .login_panel label {
        display: block;
        font-size: 12px;
        line-height: 18px;
        color: #a9a8a5;
        margin-top: 10px;
    }

    .login_panel input {
        display: inline;
        height: 42px;
        padding: 0 5%;
        line-height: 42px;
        font-size: 14px;
        color: #333333;
        border-radius: 4px;
        outline: 0;
        border: 0;
        width: 100%;
        background: #d7e8fc;
    }

    .login_bottom {
        margin-top: 20px;
        text-align: center;
    }

    .login_top_btn {
        margin-top: 2px;
        margin-right: 2px;
        text-align: right;
    }

    .login_qrcode {
        text-align: center;
    }

    .login_qrcode span {
        font-weight: bold;
        color: #303133;
        display: block;
    }

    .login_return {
        margin-top: 30px;
        width: 100%;
    }

    .login_btn {
        text-align: center;
    }

    .login_input {
        margin-top: 20px;
    }

</style>
